<template>
  <DynamicTable
      ref="dataTableRef"
      :style="{ height: tableHeight + 'px' }"
      :tableHeight="tableHeight"
      :tableData="tableData"
      :tableHeader="tableHeader"
  ></DynamicTable>
</template>
<script setup >

import DynamicTable from "./components/dynamic-table.vue";
import { ref, reactive, onMounted, nextTick} from "vue";

//表格的高度
const tableHeight = ref(0);

// 静态表格表头及数据
const tableHeader = reactive([
  {
    label: "Delivery Info",
    children: [
      { label: "Name", sort: false, prop: "name", align: "center", },
      {
        label: "Address Info",
        children: [
          { label: "State", prop: "state", align: "center", },
          { label: "City", prop: "city", align: "center", },
          { label: "Address", sort: true, prop: "address", align: "left"},
          { label: "Zip", sort: false, prop: "zip", },
        ],
      },
    ],
  },
  { label: "Date", sort: false, prop: "date", align: "left" },
]);

const tableData = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
]);

onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - (51 + 30 + 1) + 3 - 154;
  });
});
</script>
<style scoped lang="scss">

</style>